<template>
  <div class="collections">
    <Header />
    <div class="g-box">
      <div class="collections__banner">
        <h2>Collections</h2>
        <p>Buy and Sell NFTs on BNB Smart Chain</p>
      </div>
      <div class="collections__list">
        <div class="grid">
          <NFTCard
            v-for="(item, i) in list"
            :loading="loading"
            :key="i"
            :item="item"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import NFTCard from "@/components/NFTCard";
import { getNFTAll, getTokenPriceSingle } from "@/api/core";

export default {
  components: {
    Header,
    NFTCard,
  },
  data() {
    return {
      loading: true,
      list: [{}, {}, {}, {}],
    };
  },
  mounted() {
    this.loadNFT();
  },
  methods: {
    async loadNFT() {
      this.loading = true;
      const list = await getNFTAll();
      const usd = await getTokenPriceSingle("BNB");
      const temp = {};
      list.forEach((item) => {
        item.metadata = JSON.parse(item.metadata);
        item.name = item.metadata.name;
        item.price = (+item.price).toFixed(2);
        item.priceUsd = (item.price * usd).toFixed(2);
        if (!temp[item.name]) {
          temp[item.name] = [];
        }
        temp[item.name].push(item);
      });
      const collections = [];
      for (var name in temp) {
        const { price, priceUsd, image, metadata } = temp[name][0];
        const { description = "" } = metadata;
        const item = {
          name,
          desc: description,
          icon: image,
          list: [
            {
              name: "Items",
              value: "100",
            },
            {
              name: "Items listed",
              value: temp[name].length,
            },
            {
              name: "Price (BNB)",
              value: price,
            },
            {
              name: "Value (BUSD)",
              value: priceUsd,
            },
          ],
        };
        collections.push(item);
      }
      this.list = collections;
      this.loading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.collections {
  height: 100vh;
  padding: 120px 0 30px;
  box-sizing: border-box;

  &__banner {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin: 30px 0 60px;

    h2 {
      font-size: 36px;
      font-family: "Roboto Black";
      color: var(--color);
      margin-bottom: 20px;
    }
    p {
      font-size: 16px;
      font-family: "Roboto Medium";
      color: var(--color-content);
      line-height: 1.5;
    }
  }

  &__list {
    margin-bottom: 60px;
    .grid {
      display: grid;
      grid-gap: 30px;
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}
</style>
